<template>
    <div class="web-title-style">
        <div class="btn btn-tool btn-light " >
            <input type="color" v-model="value.color" />
        </div>
        <bi-button class="btn-tool" type="light" icon="fa-bold"  :class="value['bold']?'btn-selected':''" @click="value.bold=!value.bold" ></bi-button>
        
        <bi-button class="btn-tool" type="light" icon="fa-italic"  :class="value['italic']?'btn-selected':''" @click="value.italic=!value.italic" ></bi-button>
        <bi-button class="btn-tool" type="light" icon="fa-strikethrough"  :class="value['strikethrough']?'btn-selected':''" @click="value.strikethrough=!value.strikethrough" ></bi-button>
        <bi-button class="btn-tool" type="light" icon="fa-underline"  :class="value['underline']?'btn-selected':''" @click="value.underline=!value.underline" ></bi-button>
        
        <bi-button class="btn-tool clear" type="light" icon="fa-ban" @click="clear()" ></bi-button>
    </div>
</template>


<script>
export default{
    emits:['update:modelValue','change'],
    props:{
        modelValue:{
            type:String,
            default:''
        },
    },
    data(){
        let value = {
            italic:false,
            strikethrough:false,
            underline:false,
            bold:false,
            color:''
        }
        
        return  {
            value
        };
    },
    watch:{
        value:{
            deep:true,
            handler(val){
                let style ={};
                
                if (val.bold){
                    style['font-weight'] = 'bold';
                }
                if (val.italic){
                    style['font-style'] = 'italic';
                }
                if (val.underline){
                    style['text-decoration'] = 'underline';
                }
                if (val.strikethrough){
                    style['text-decoration'] = 'line-through';
                }

                if (val.underline && val.strikethrough){
                    style['text-decoration'] = 'underline line-through';
                }

                if (val.color){
                    style['color'] = val.color;
                }


                //let str = style.join(';') + style.length>0 ? ';' : '';
                let str = '';
                for(let name in style){
                    str += name + ':' + style[name] + ';';
                }
                this.$emit('update:modelValue',str);
                this.$emit('change',str,style);
            }
        },
        modelValue:{
            immediate:true,
            handler(val){
                let list = val.split(';');
                function trim(str) {
                    return str.replace(/^\s+|\s+$/g, '');
                }
                for(let i in list){
                    if (list[i]!=''){
                        let arr = list[i].split(':');
                        let name = trim(arr[0]);
                        let value = trim(arr[1]);

                        if (name =='font-weight' && value == 'bold') this.value.bold = true;
                        if (name =='font-style' && value == 'italic') this.value.italic = true;
                        if (name =='text-decoration' && value.indexOf('underline') !== -1 ) this.value.underline = true;
                        if (name =='text-decoration' && value.indexOf('line-through') !== -1 ) this.value.strikethrough = true;
                         
                        if (name =='color') this.value.color = value;


                    }
                }
                
            }
        }
    },
    methods:{
        clear(){
            this.value = {
                italic:false,
                strikethrough:false,
                underline:false,
                bold:false,
                color:''
            }
        }
    }
}
</script>


<style>
.web-title-style{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.web-title-style .btn-tool{
    width: 30px;
    padding: 0;
    height: 30px;
    font-size: 16px;
    display: block;
}
.web-title-style .btn-tool.clear{
    color:var(--bs-red);
}
.web-title-style .btn-tool.clear:hover{
    color:var(--bs-red);
}
.web-title-style .btn-tool input[type="color"]{
    width: 100%;
    height: 100%;
    padding: 5px;
    border: none;
    cursor: pointer;
}

.web-title-style  .btn + .btn{
    margin-left: 5px;
}


</style>